<template>
  <el-form ref="basicInfoForm" :model="info" :rules="rules"
           label-width="70px">
    <el-row :gutter="40">
      <el-col :span="12">
        <el-form-item label="数据源" prop="dbId">
          <el-select ref="tenantId" v-model="info.dbId" :disabled="disabled()"
                     placeholder="请选择数据源" clearable style="width: 100%;"
                     @change="changeData">
            <el-option
              v-for="item in dataSourceList"
              :key="item.dbId"
              :label="item.dbName"
              :value="item.dbId"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="表名称" prop="tableName">
          <el-select ref="tenantId" v-model="info.tableName" :disabled="disabled()"
                     placeholder="请选择表名" clearable style="width: 100%;"
                     @change="changTable">
            <el-option
              v-for="(item) in tableList"
              :key="item.tableName"
              :label="item.tableName"
              :value="item.tableName"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="表说明" prop="tableComment">
          <el-input v-model="info.tableComment" class="limit" placeholder="请输入表说明"
                    show-word-limit maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="模块名" prop="moduleName">
          <el-input v-model.trim="info.moduleName" class="limit" show-word-limit
                    placeholder="请输入模块名" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="业务名" prop="businessName">
          <el-input v-model.trim="info.businessName" class="limit" show-word-limit
                    placeholder="请输入业务名" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务名" prop="serviceName">
          <el-input v-model.trim="info.serviceName" class="limit" show-word-limit
                    placeholder="请输入服务名" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="包名" prop="packageName">
          <el-input v-model.trim="info.packageName" class="limit" show-word-limit
                    placeholder="请输入包名" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="作者" prop="author">
          <el-input v-model.trim="info.author" class="limit" show-word-limit
                    placeholder="请输入作者" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="应用菜单">
          <el-select ref="tenantId" v-model="info.menuCode" filterable
                     placeholder="请选择应用菜单" clearable style="width: 100%;">
            <el-option
              v-for="(item) in menuList"
              :key="item.menuCode"
              :label="item.menuName"
              :value="item.menuCode"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input v-model.trim="info.remark" class="limit" type="textarea"
                    show-word-limit placeholder="请输入备注" maxlength="100"
                    :rows="3" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <div class="btnbox">
          <el-button
            class="filter-item"
            @click="cancel"
          >取消
          </el-button>
          <el-button
            type="primary"
            class="filter-item"
            @click="tabnext"
          >下一步
          </el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getDataSourceList, getTablesInfo } from '@/framework/api/codeGeneration'
import { toCamal, upperCamelCase } from '@/framework/utils/index'
import { getMenuList } from '@/framework/api/menu'

const formatToHump = (value) => {
  // 生成服务名生成规则：根据表名例如A_B_C， 服务名为：/ABC 注意BC要驼峰，具体实例表名是hr_organization_copy1_copy1 ，服务名是/hrOrganizationCopy1Copy1
  // eslint-disable-next-line no-useless-escape
  return `/${value.replace(/\_(\w)/g, (_, letter) => letter.toUpperCase())}`
}
export default {
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      infoObj: {},
      dataSourceList: [],
      tableList: [],
      menuList: [],
      tableId: null,
      rules: {
        dbId: [
          { required: true, message: '请选择数据源', trigger: 'blur' }
        ],
        tableName: [
          { required: true, message: '请选择表名', trigger: 'blur' }
        ],
        tableComment: [
          { required: true, message: '请输入表说明', trigger: 'blur' }
        ],
        moduleName: [
          { required: true, message: '请输入模块名', trigger: 'blur' },
          { pattern: /^\w+$/, message: '模块名仅限英文、数字和下划线', trigger: 'blur' }
        ],
        businessName: [
          { required: true, message: '请输入业务名', trigger: 'blur' },
          { pattern: /^\w+$/, message: '业务名仅限英文、数字和下划线', trigger: 'blur' }

        ],
        serviceName: [
          { required: true, message: '请输入服务名', trigger: 'blur' }
          // { pattern: /^\w+$/, message: '服务名仅限英文、数字和下划线', trigger: 'blur' }

        ],
        packageName: [
          { required: true, message: '请输入包名', trigger: 'blur' },
          { pattern: /(^(?:[a-z_]+(?:\d*[a-zA-Z_]*)*)(?:\.[a-z_]+(?:\d*[a-zA-Z_]*)*)*$)/, message: '包名必须以英文字母开头、包含字母和"."', trigger: 'blur' }

        ]
      }
    }
  },
  created() {
    this.getDaSourceList()
  },
  methods: {
    disabled() {
      if (this.info.tableId) {
        return true
      } else {
        return false
      }
    },
    // 获取数据源列表
    getDaSourceList() {
      getDataSourceList().then((res) => {
        this.dataSourceList = res.data
      })
      getMenuList().then(({ data }) => {
        this.menuList = data
      })
    },
    changeData(value) {
      this.$emit('changeInfo', { dbId: value })
      this.tableList = []
      this.getTableList(value)
    },
    // 获取数据源下table表的列表
    getTableList(dbId) {
      getTablesInfo({ dbId }).then((res) => {
        this.tableList = res.data
      })
    },
    changTable(value) {
      this.$set(this.info, 'moduleName', toCamal(value))
      // const businessName = [...value.split('_')[1]]
      // businessName[0] = businessName[0].toUpperCase()
      // this.$set(this.info, 'businessName', businessName.join(''))  upperCamelCase
      this.$set(this.info, 'businessName', upperCamelCase(toCamal(value)))
      this.$set(this.info, 'serviceName', formatToHump(value))
      this.$set(this.info, 'packageName', 'com.hbisdt.dqbasic.modular')
      const indexNum = this.tableList.findIndex((item, index) => {
        return item.tableName === value
      })
      this.$set(this.info, 'tableComment', this.tableList[indexNum].tableComment)
      this.$set(this.info, 'tableSchema', this.tableList[indexNum].tableSchema)
      this.$refs['basicInfoForm'].validateField('tableComment')
    },

    tabnext() {
      this.$refs['basicInfoForm'].validate((valid) => {
        if (valid) {
          this.$emit('tabClick', 'second')
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$router.push('/devTools/codeGeneration')
    }
  }
}
</script>
<style lang='scss' scoped>
.btnbox{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
